<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>曲线绘制arcTo</title>
    <style>
        *{margin: 0;padding: 0;}
    </style>
</head>
<body style="height: 100%">
<canvas id="canvas" style="border:1px solid gray;">该浏览器不支持canvas,请更换浏览器后重试</canvas>
</body>
<script>
    var CANVAS_WINDTH = document.body.clientWidth-10;
    var CANVAS_HEIGHT = document.body.clientHeight-10;
    window.onload =function () {
        var canvas = document.getElementById("canvas");
        canvas.width = CANVAS_WINDTH;
        canvas.height = CANVAS_HEIGHT;
        var cxt = canvas.getContext('2d');
        fillMoon(cxt,2,400,400,300,35);
    };

    /*
    * 填充弯月
    * */
    function fillMoon(cxt,d,x,y,R,rot,fillColor) {
        cxt.save();
        cxt.translate(x,y);
        cxt.rotate(rot*Math.PI/180);
        cxt.scale(R,R);
        pathMoon(cxt,d);
        cxt.fillStyle = fillColor||"#fb5";
        cxt.fill();
        cxt.restore();
    }

    /*
    * 绘制弯月
    * arcTo绘制注意笔尖的位置
    * 也可以使用两个实心圆重合的方式绘制
    * */
    function pathMoon(cxt,d) {
        cxt.beginPath();
        cxt.arc(0,0,1,1.5*Math.PI,0.5*Math.PI);
//        cxt.fillStyle = "#fb5";
//        cxt.fill();
//        cxt.beginPath();
//        cxt.arc(-0.5,0,1,0,2*Math.PI);
//        cxt.fillStyle = "#fff";
        cxt.arcTo(d,0,0,-1,dis(0,-1,d,0)/d);
        //贝塞尔二次曲线
//        cxt.quadraticCurveTo(d,0,0,-1);
        cxt.closePath();
    }

    /*
    * 已知两点坐标求长度
    * */
    function dis(x1,y1,x2,y2) {
        return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
    }

</script>
</html>